<template>
 <div class="w-full mt-10">
  <a-input-search
      v-model:value="searchVal"
      placeholder="输入用户名或代销处名搜索"
      style="width: 200px;margin-bottom: 1rem;"
      @search="handleSearch"
    />
  <a-table :dataSource="userList" :columns="columns" :pagination="false" bordered/>
 </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { getUserList } from '@/api/user'
import type { UserInfo, OriginalUserInfo } from '@/interface/user'
type AntColumn = {
  dataIndex: string | number
  key?: string | number
  slots?: { title: string, customRender: string }
  title?: string
}

const searchVal = ref('') 
const handleSearch = () => {
  getAllUserList(searchVal.value)
}

const columns: AntColumn[] = [
  {
    dataIndex: 'user_name',
    title: '用户名'
  },
  {
    dataIndex: 'agency_name',
    title: '代销处'
  },
  {
    dataIndex: 'agency_phone',
    title: '代销处联系方式'
  },
  {
    dataIndex: 'agency_addr',
    title: '代销处地址'
  },
  {
    dataIndex: 'agency_manager',
    title: '代销处经理'
  },
]
const userList = ref<UserInfo[]>([])
const getAllUserList = async (content: string = '') => {
  const { data: { data } }: { data: { data: OriginalUserInfo[] } } = await getUserList(content)
  userList.value = data.map(item => ({
    key: item.u_id,
    user_name: item.u_name,
    agency_phone: item.o_phone,
    agency_name: item.o_name,
    agency_addr: item.o_address,
    agency_manager: item.o_manager
  }))
}
getAllUserList()
</script>
<style scoped>
</style>